<template>
	<view>
		<picker @change="bindPickerChange" @columnchange="pluginclass" :value="pickVal" :range="cityArr"
			range-key="name" mode="multiSelector">
			<view v-if="pickVal2.length==0"><slot></slot></view>
			<view v-else class="uni-input">
				<text>{{cityArr[0][pickVal2[0]].name}}</text>
				<text>{{cityArr[1][pickVal2[1]].name}}</text>
				<text>{{cityArr[2][pickVal2[2]].name}}</text>
			</view>
		</picker>
	</view>
</template>

<script>
	import base from '@/config/baseUrl.js'
	export default {
		data() {
			return {
				pickVal: [0, 0, 0], // 选择器默认值
				pickVal2:[],   // 辅助城市名字线索
				cityArr: [],   // 所有城市
				city: ''
			}
		},
		mounted() {
			console.log('base', base);
			// 页面初始化
			this.loadProvinces()
		},
		methods: {
			loadProvinces() { // 加载省份
				uni.request({
					url: base.baseUrl + "api/index/city_list",
					method: 'get',
					data:{
						pid: 0
					},
					success: async (res) => {
						let {
							data
						} = res.data
						// console.log(data)
						this.cityArr[0] = data
						this.loadCities(data[0].id)
						// this.$forceUpdate()
					},
					fail: async (res) => {}
				})
			},
			// 请求地级市
			loadCities(city) {
				uni.request({
					url: base.baseUrl + "api/index/city_list",
					data: {
						pid: city
					},
					method: 'get',
					success: async (res) => {
						let {
							data
						} = res.data
						
						this.cityArr[1] = data
						this.loadAreas(data[0].id)
					},
					fail: async (res) => {}
				})
			},
			// 请求县区市
			loadAreas(AreaId) {
				uni.request({
					url: base.baseUrl + "api/index/city_list",
					data: {
						pid: AreaId
					},
					method: 'get',
					success: async (res) => {
						let {
							data
						} = res.data
						this.cityArr[2] = data
					},
					fail: async (res) => {}
				})
			},
			// 确定其他选择的值
			bindPickerChange(data) {
				// console.log('data', data);
				this.pickVal=data.detail.value;
				this.pickVal2=data.detail.value;
				// 以下拓展区域业务逻辑
				this.city = `${this.cityArr[0][this.pickVal2[0]].name}${this.cityArr[1][this.pickVal2[1]].name}${this.cityArr[2][this.pickVal2[2]].name}`
				this.$emit("confirm", [
					this.cityArr[1][this.pickVal2[1]].name,
					this.cityArr[0][this.pickVal2[0]].name,
					this.cityArr[2][this.pickVal2[2]].name
				])
			},
			// 选择时且未点击确定是的值
			pluginclass(e) {
				// console.log('修改的列为：' + e.detail.column + '，值为：' + e.detail.value, e)
				if (e.detail.column == 0) {
					this.loadCities(this.cityArr[0][e.detail.value].id);
				}
				if (e.detail.column == 1) {
					this.loadAreas(this.cityArr[1][e.detail.value].id);
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.addRess{
		line-height: 80rpx;
	}
</style>
